<template>
  <div class="guide-fixed" @touchmove.prevent  @click.stop.prevent="closeGuide" :class="{'show':showGuide}" v-show="show" style="display:none">
    <slot></slot>
  </div>
</template>
<script>
//写一写统一弹窗蒙层
export default {
  name:'comm-dialog',
  props:{
    show:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      showGuide:false,
    }
  },
  methods: {
    closeGuide(){
      this.$emit("closeGuide",false);
    }
  },
  watch: {
    show(val){
      this.showGuide = val;
    }
  },
}
</script>
<style lang="less" scoped>
@keyframes guidemove {
  0%{
    opacity: 0;
  }
  1000%{
    opacity: 1;
  }
}
.guide-fixed{
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.65);
  &.show{
    animation: guidemove 0.3s linear 0s both;
  }
  img{
    display: block;
    margin: 0 auto;
  }
  //写一写解析
  .guideImg{
    width: 364px;
    height: 160px;
  }
  //编辑评论引导
  .viewpointGuide{
    width: 355px;
    height: 112px;
  }
  //编辑楼盘引导
  .houseGuide{
    width: 359px;
    height: 157px;
  }
  //编辑段落引导
  .pargraphGuide{
    width: 359px;
    height: 165px;
  }
  .selecthouseGuide{
    width: 172px;
    height: 60px;
    margin-top: 303px;
  }
  //选择素材
  .tabGuide{
    position: absolute;
    left: 5px;
    top: 159px;
    width: 256px;
    height: 164px;
  }
  .tabOverGuide{
    position: absolute;
    right: 8px;
    bottom: 0;
    width: 237x;
    height: 156px;
  }
  
}
</style>
